import React, { useEffect, useRef } from 'react';
import useCharts from '../ModuleCharts/useCharts';
import emitter from '#/utils/events';
import PropTypes from 'prop-types';
const BarCharts = (props) => {
  const {
    objStyle = { height: 287 },
    xData,
    series,
    legend = {
      left: 'center',
      bottom: 0,
      itemWidth: 18,
      itemHeight: 12,
    },
    tooltip,
    initToolTipFn,
    block,
  } = props;

  const __echarts_ = useRef(null);

  const COMMONPOTION = {
    legend,
    grid: {
      top: 40,
      left: 0,
      right: 30,
      bottom: 50,
      containLabel: true,
    },
  };
  const xAxisOption = [
    {
      type: 'category',
      data: xData,
      boundaryGap: true,
      axisPointer: {
        type: 'shadow',
        label: { show: false },
        shadowStyle: { color: 'rgb(234, 238, 244,0.3)' },
      },
      axisTick: { show: false },
      nameTextStyle: { color: '#888E95' },
      axisLabel: { color: '#888E95' },
      axisLine: { lineStyle: { color: '#D1D9E9' } },
    },
    {
      type: 'category',
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
      splitArea: { show: false },
      splitLine: { show: false },
    },
  ];
  const yAxisOption = [
    {
      type: 'value',
      axisLine: {
        show: false,
        lineStyle: {
          color: '#888E95',
        },
      },
      splitNumber: 2,
      splitLine: {
        show: true,
        lineStyle: {
          height: '1px',
          color: block ? '#4e5154' : '#EDF0F6',
        },
      },
      axisTick: {
        show: false, //y轴刻度线
      },
      scale: true,
      name: '',
      // max: 'dataMax',
      min: 0,
      axisLabel: {
        formatter: function (value) {
          return value;
        },
      },
      axisPointer: {
        label: {
          formatter: function (item) {
            return item.value && item.value.toFixed(2);
          },
        },
      },
    },
  ];
  const barOption = {
    ...COMMONPOTION,
    tooltip,
    xAxis: xAxisOption,
    yAxis: yAxisOption,
    series,
  };

  const { handleCartsResize, HideItem } = useCharts(__echarts_, barOption);

  useEffect(() => {
    initToolTipFn();
  }, [HideItem]);

  useEffect(() => {
    window.addEventListener('resize', () => {
      if (!__echarts_) {
        window.removeEventListener('resize', handleCartsResize);
        return;
      }
      handleCartsResize();
    });
  }, []);

  useEffect(() => {
    emitter.addListener('onChangeMnue', _onHandleResize);
    return () => {
      emitter.removeListener('onChangeMnue', _onHandleResize);
    };
  }, []);

  const _onHandleResize = () => {
    setTimeout(() => {
      handleCartsResize();
    }, 300);
  };

  return (
    <div style={objStyle}>
      <div style={{ width: '100%', height: '100%' }} ref={__echarts_} />
    </div>
  );
};

BarCharts.propTypes = {
  objStyle: PropTypes.object,
  xData: PropTypes.array,
  series: PropTypes.array,
  legend: PropTypes.object,
  tooltip: PropTypes.object,
  initToolTipFn: PropTypes.func,
  maxNum: PropTypes.number,
};

export default BarCharts;
